<template>
    <transition name='fade'>
        <div class="layer-loading" v-show="loadingShow">
            <div class="layer-box">
                <img src="@/assets/img/icon/loading.png" alt="">
                <p v-html="loadingText"></p>
            </div>
        </div>
    </transition>
</template>

<script>
export default {
  name: 'layerLoading',
  props:[
     "loadingShow",
     "loadingText",
  ],
  data () {
    return {
      
    }
  },
  watch:{
    loadingShow(newVal,oldVal){
        if(newVal){
            touchFalse() 
        }else{
            touchTrue()
        }
    },
  },
  created:function() {
   
  },
  mounted:function() {

  },
  methods: {
   
    
  }
}
</script>
<style type="text/css" scoped>
    .layer-loading{
        width:100%;
        height:100%;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 3000;
    }
    .layer-box{
        line-height: 0.42rem;
        padding: 0.36rem 0.54rem;
        background: rgba(0,0,0,.7);
        border-radius: 0.22rem; 
        color: #fff;
        font-size: 0.24rem;
        box-sizing: border-box;
        min-width: 2.8rem;
        max-width: 3.8rem;
        text-align: center;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        -webkit-transform: translate(-50%,-50%);
    }
    .layer-box img{
        width: 0.64rem;
        height: 0.64rem;
        animation: inLoading 0.8s linear 0s infinite;
        -webkit-animation: inLoading 0.8s linear 0s infinite;
    }
    .layer-box p{
        padding-top: 0.12rem;
    }
    
</style>